<template>
    <div class="game">
        <transition name="fade"
                    v-for="(qitem, index) in qlist"
                    :key="index">
            <v-question class="question"
                        v-show="cur === index"
                        :question="qitem"
                        @answer-finish="answered($event)"></v-question>
        </transition>
        <clock ref="clock"
               class="clock"
               :max="30"
               @timeup="answered(false)"></clock>
    </div>
</template>

<script>
import question from "../components/question/question";
import clock from "../components/clock/clock";
import { questionList } from "../questionList";
export default {
    name: "game",
    data() {
        return {
            qlist: [],
            cur: 0,
            wrong: false,
            waiting: false,
        };
    },
    methods: {
        answered(result) {
            if(this.waiting) return;
            this.waiting = true;
            console.log("答题结果：", result);
            // 暂停计时器
            this.$refs.clock.pause();
            if (!this.wrong) this.wrong = !result;
            // console.log(this.wrong)
            setTimeout(() => {
                if (this.wrong) {
                    if (this.cur < 4) {
                        this.cur += 1;
                        this.$refs.clock.restart();
                    } else {
                        // 结束且挑战失败
                        console.log("挑战失败");
                        this.$router.replace({
                            name: "result",
                            params: { result: false }
                        });
                    }
                } else {
                    if (this.cur < 2) {
                        this.cur += 1;
                        this.$refs.clock.restart();
                    } else {
                        // 结束且挑战成功
                        console.log("挑战成功");
                        this.$router.replace({
                            name: "result",
                            params: { result: true }
                        });
                    }
                }
                this.waiting = false;
            }, 2000);
        },
        // 洗牌算法,乱序
        shuffle(arr) {
            for (let i = 0; i < arr.length; i++) {
                const randomIndex =
                    Math.round(Math.random() * (arr.length - 1 - i)) + i;
                [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
            }
            return arr;
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.clock.start();
        });
    },
    components: {
        "v-question": question,
        clock: clock
    },
    created() {
        // 随机获取5道题
        this.qlist = this.shuffle(questionList).slice(0, 5);
        this.qlist = questionList;
        console.log(this.qlist);
    }
};
</script>
<style lang="scss" scoped>
.game {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/p2/common_bg.jpg") no-repeat;
    background-size: 100%;
    .question {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding-top: 3.44rem;
        margin: 0 auto;
        width: 4.36rem;
    }
    .clock {
        position: absolute;
        right: 0.1rem;
        top: 8.2rem;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 1s ease;
        opacity: 1;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
}
</style>
